<template>
  <el-dialog
    @open="handleOpen"
    @close="handleClose"
    :title="title"
    :visible="dialogVisible"
    width="80%"
  >
    <el-form
      :model="postData"
      :rules="postRules"
      label-width="80px"
      label-position="left"
      ref="postForm"
    >
      <el-form-item prop="name" label="校区名字">
        <el-input v-model="postData.name" />
      </el-form-item>
      <el-form-item prop="areaId" label="地区名">
        <el-input readonly v-model="postData.areaName" />
        <hr />
        <el-tree
          :data="areaOptions"
          :props="defaultProps"
          @node-click="handleNodeClick"
        >
        </el-tree>
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button @click="submit" type="primary">提 交</el-button>
    </div>
  </el-dialog>
</template>

<script>
import postDialog from "../../../mixins/postDialog";
import getAreaList from "../../../mixins/getAreaList";

export default {
  name: "postDialog",
  mixins: [postDialog, getAreaList],
  data() {
    return {
      postData: {
        name: "",
        areaId: "",
        areaName: ""
      },
      postRules: {
        name: [{ required: true, message: "请输入校区名字", trigger: "blur" }],
        areaId: [
          { required: true, message: "请输入地区名字", trigger: "submit" }
        ]
      },
      addUrl: "/api/school/school"
    };
  },
  methods: {
    handleNodeClick(data) {
      if (data.level !== 3) {
        return;
      }
      this.postData.areaId = data.id;
      this.postData.areaName = data.name;
    }
  }
};
</script>

<style scoped></style>
